<template>
  
  <div style="height:300px;width: 550px;margin:0 auto"  ref="chart" class="plotly-chart" ></div>
  
</template>

<script setup lang="ts">
import { onMounted, ref,defineExpose,defineProps } from 'vue'
import Plotly from 'plotly.js-dist'


const props = defineProps({
  graphDataList: {
    type: Array,
    default: () => [],
  },
})

// 获取 DOM 元素的引用
const chart = ref(null);



// 固定的Y轴类型
const yLabels = ['Type A', 'Type B', 'Type C', 'Type D', 'Type E',
  'Type F', 'Type G', 'Type H', 'Type I', 'Type J']; // Y轴标签（10个类型）

const childMethod = () => {
  // 构建数据对象
  
const data = [];

if(props.graphDataList.data){
props.graphDataList.data.forEach((item, i) => {
    // var arr=[];
    // if(i==0){
    //   arr=[0.2,0.1,0.5];
    // } if(i==1){
    //   arr=[0.2,0.3,0.5];
    // } if(i==2){
    //   arr=[0.6,0.6,0];
    // }
  data.push({
      x: item.x,
      y: item.y,
      name: Object.values(props.graphDataList.typeList)[i],
      type: 'bar',
      hoverinfo: 'none',
      // width:item.y.length==1? 0.2 : 1,
      // name:item.name,
      // , // 第一个图例内容
      orientation: 'h',
      // marker: { color: '#0074D9' }
    });
})
// 配置图表布局
const layout = {
    barmode: 'stack', // 设置为堆叠模式
    title: 'Horizontal Stacked Bar Chart with 10 Types and 12 Components (100% Total)',
    // xaxis: {title: 'Percentage (%)'},
    yaxis: {title: 'Types'},
    showlegend: true, // 显示图例
    // height: '100%',
    legend: {
      traceorder: 'normal', // 图例顺序
      orientation: 'h', // 图例水平排列
      yanchor: 'top',
      // y: -0.2,
      xanchor: 'center',
      x: 0.5
    },
    xaxis: {
      title: '百分比 (%)',
      range: [0, 1], // 设置y轴范围为0-100
      tickformat: '%.0f%%' // 格式化刻度显示为百分比（保留整数）
    },
    margin: {l: 120, r: 10, t: 80, b: 30} // 调整边距以容纳更多内容
  };

// 绘制图表
  Plotly.newPlot(chart.value, data, layout )
}
}

onMounted(() => {
  childMethod();
})

// 向父组件暴露方法
defineExpose({
  childMethod
})

onMounted(() => {
  childMethod()
})
</script>

<style scoped>
.plotly-chart {
  width: 100%;
  height: 100%;
}
</style>
